<template>
    <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
    <ZwTable
        ref="tableRef"
        class="table-box"
        :option="tableOption"
        :row-key="getRowKey"
        :fetch-params="state.searchParams"
        :fetch-api="fetchApi()"
        @select-all="selectAll"
        @select="handleSelectionChange">
    </ZwTable>

    <!-- <el-pagination v-model:currentPage="pagination.currentPage" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total" @current-change="handleCurrentChange"> </el-pagination> -->
</template>
<script setup lang="tsx">
import { reactive, ref, onMounted, computed, nextTick } from 'vue';
import { subAcountList } from '@/api/sub';
import { useStore } from '@/store';
import { tableH, reSize } from '@/utils/utils';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { deepCopy } from '@/utils/helper';
import { ElTag, ElButton } from 'element-plus';

const store = useStore();
const roleId: any = ref('');
const tableRef = ref();
const emit = defineEmits({
    changeCurrent: null,
    handleDetail: null,
    sectionChange: null,
    selectAll: null,
    reset: null,
    search: null
});
const tabH = ref('500px');
const formInline = reactive({
    mobile_or_account_name: ''
});

const type = ref(1);
const tableData = ref([]);
const props = defineProps(['selectId']);
const defaultParams = reactive({
    mobile_or_account_name: '',
    account_role: ''
});
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '手机号/账号名搜索',
            name: 'mobile_or_account_name',
            value: '',
            type: 'input',
            placeholder: '输入手机号/账号名搜索'
        }
    ];
});
const tableOption = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'name',
        width: 120,
        label: '账号名称'
    },
    {
        prop: 'phone',
        width: 150,
        label: '手机号'
    },
    {
        prop: 'department',
        label: '部门',
        render({ row }) {
            return (
                <>
                    <div vShow={row.department.length > 0}>
                        {row.department.map(item => {
                            return (
                                <ElTag size="small" class="form-tags" type="warning">
                                    {item.name}
                                </ElTag>
                            );
                        })}
                    </div>
                    <span vShow={row.department.length <= 0}>--</span>
                </>
            );
        }
    },
    {
        prop: 'status_name',
        label: '状态'
    },
    {
        prop: 'updated_at',
        label: '添加时间',
        width: 180,
        render({ row }) {
            return <div>{row.created_at || '--'}</div>;
        }
    },
    {
        prop: 'operate',
        label: '操作',
        flex: 'right',
        width: 120,
        isOperate: true,
        render({ row, column, index }) {
            return (
                <ElButton size="small" onClick={() => countDetail(row)}>
                    修改角色
                </ElButton>
            );
        }
    }
];

const getRowKey = (row: any) => {
    return row.id;
};

const search = (data: any) => {
    tableRef.value.clearSelection();
    const p = {
        ...data,
        account_role: roleId.value
    };
    state.searchParams = deepCopy(p);
    emit('search');
};
const reset = (v: any) => {
    tableRef.value.clearSelection();
    const p = {
        ...v,
        account_role: roleId.value
    };
    state.searchParams = deepCopy(p);
    emit('reset');
};
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};
const fetchApi = () => {
    // 获取文件列表
    getTableH();
    return subAcountList;
};
const handleCurrentChange = (value: number) => {
    emit('changeCurrent', value);
};
//获取子账号列表
const getsubList = (val?: any) => {
    tableRef.value.clearSelection();
    roleId.value = val;
    search(defaultParams);
};
//多选
const handleSelectionChange = (val: any) => {
    emit('sectionChange', val);
};
//全选
const selectAll = (val: any) => {
    emit('selectAll', val);
};
//修改角色
const countDetail = (value: any) => {
    emit('handleDetail', value);
};
onMounted(() => {
    getTableH();
});
defineExpose({
    getsubList
});
</script>
<style lang="scss" scoped>
.demo-form-inline {
    display: flex;
    justify-content: space-between;
    background-color: #f9f9f9;
    padding: 16px;
    margin-bottom: 10px;
    .search {
        background-color: #ff6b00;
        color: #ffffff;
    }
}
.margin {
    margin-bottom: 0px;
}
</style>
